<template>
   <div class="Forum-classify">
      <ul>
         <li :class="{ classifyActive: classifyActive === 0 }" @click="AllpostsList">看帖</li>
         <li :class="{ classifyActive: classifyActive === 1 }" @click="classifyActive = 1">推荐</li>
         <li v-for="(item, index) in SystemData.SystemClassifyList.slice(0, 8)" :key="index"
            @click="GetclassifyData(item, index + 2)" :class="{ classifyActive: classifyActive === index + 2 }">
            {{ item.classify_name }}
         </li>
         <!-- <li class="more">
            <span class="iconfont icon-fenleixuanzhong"></span>
            更多
         </li> -->
      </ul>
      <div class="Chat-Channel-Open">
         <div class="sousuo">
            <span class="iconfont icon-sousuo1"></span>
            <input type="text" placeholder="社区搜索（开发中...）" @keyup.enter="handleEnter">
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
         SystemPostsTopList: [],
      }
   }
});

const classifyActive = ref(0)

const state = ref({
   page: 1,
   limit: 10,
   classifyId: '',
   postsType: 0,
})

// 获取帖子列表
const getpostslist = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/FrontPostslist', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         page: state.value.page,
         limit: state.value.limit,
         classifyId: state.value.classifyId,
         postsType: state.value.postsType,
      }
   })
   props.SystemData.SystemPostsList = res.data.list
   props.SystemData.SystemPostsTopList = res.data.toplist
   // console.log(props.SystemData.SystemPostsList);
}
getpostslist()



// 点击全部 查询全部帖子列表
const AllpostsList = async () => {
   classifyActive.value = 0
   state.value.classifyId = ''
   getpostslist()
}

// 点击分类 请求分类数据
const GetclassifyData = async (item: any, index: number) => {
   classifyActive.value = index
   state.value.classifyId = item._id
   getpostslist()
}




// 搜索框监听回车事件
const handleEnter = () => {
   ElMessage.warning('社区内搜索开发中...')
}



</script>
<style lang="scss" scoped>
.Forum-classify {
   padding: 0 15px 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;

   ul {
      flex: 1;
      display: flex;
      margin-right: 15px;
      position: relative;

      li {
         padding: 8px 18px;
         margin-right: 10px;
         background: #fff;
         color: #555;
         border-radius: 6px;
         transition: all 0.2s ease-in-out;
         box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.24);

         &:hover {
            background-color: var(--aoir-color-primary);
            color: #FFF;
            cursor: pointer;
         }

         &:active {
            transform: translateY(2px);
         }
      }

      .more {
         display: flex;
         align-items: center;
         // position: absolute;
         // right: 0;
         // top: 50%;
         // transform: translateY(-50%);
         margin-right: 0px;

         .iconfont {
            margin-right: 5px;
            font-size: 17px;
         }
      }

      .classifyActive {
         background-color: var(--aoir-color-primary);
         color: #FFF;
      }
   }

   .Chat-Channel-Open {
      display: flex;
      align-items: center;

      .sousuo {
         position: relative;

         input {
            width: 220px;
            height: 38px;
            border: 0;
            font-size: 16px;
            background-color: #FFF;
            border-bottom: 1px solid #f5f6f7;
            border-radius: 4px;
            caret-color: var(--aoir-color-primary-2);
            padding: 0 10px 0 35px;
            border-radius: 50px;
            box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

            &::placeholder {
               color: #CCD0DB;
            }
         }

         .iconfont {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 600;
            color: #444;
         }
      }


   }
}
</style>